<template>
    <div class="create_venue">

        <van-nav-bar
            title="创建场馆"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />

        <div class="body">

           <van-cell-group>
               <van-cell title="图片上传:"></van-cell> 
               <van-cell>
                   <van-uploader :after-read="afterRead" multiple  v-model="fileList"/>
               </van-cell>
               

			  <van-field
			    v-model="venue.name"
			    label="场馆名称:"
			    placeholder="请输入场馆名称"
			  />

               <van-cell title="场馆类型:" is-link :value="typeName" @click="showTypeList" />
             
           </van-cell-group>

           <van-cell-group class="game-des">
                <van-cell title="场馆简介:" />
                <van-field
                v-model="venue.des"
                type="textarea"
                placeholder="请输入场馆简介"
                rows="1"
                autosize
                />
                 <van-field
                    v-model="venue.num"
                    label="场地数量:"
                    placeholder="请输入场地数量"
                />
                

                <van-cell title="场馆地址:" value='选择地址' is-link to="map" />

                <van-field
                    v-model="venue.phone"
                    label="手机号码:"
                    placeholder="请输入手机号码"
                />

                <van-cell title="是否开放:">
                    <van-switch v-model="venue.state" />
                </van-cell>

            </van-cell-group>  

            <div class="btn-wrap">
               <van-button type="primary" @click="saveVenue">保存场馆</van-button>
            </div>
            
        </div>

        <!-- 类型列表 -->
        <van-action-sheet v-model="typeShow" :actions="typeList" @select="onSelect" />

        
    </div> 

</template>

<script>


export default {

    name:'create_venue',
    
    data(){

        return {

            formData:new FormData(),

            venue:{
                type_id:0,
                name:"",
                address:'',
                 des:'',
                 num:0,
                 phone:'',
                 state:1
            },

            fileList:[],
            typeShow:false,
            typeList:[],
            typeName:'选择类型' ,
           
        
        }

    },

   

    created(){

        // 调用获取类型方法
        this.getTypeList();
        
    },

    methods:{

        // 读取上传的图片
        afterRead(files){
           //console.log(files);
           files.map(item=>{
               this.formData.append('pic[]',item.file);
           })
        },

        // 保存场馆
        async saveVenue(){

            //console.log(this.venue);
            this.formData.append('form',JSON.stringify(this.venue));
            let { data:res } = await this.$http.post('venue/create',this.formData);
            if(res.status !== 200 ) this.$toast.error('发布失败!');
            this.$toast.success(res.msg);
            
        },
        
        // 选择项目
        onSelect(item,index){
           
           this.typeName = item.name;
           this.venue.type_id = item.id;
           this.$toast(item.name);
           this.typeShow = false;

        },
        
        // 返回
        onBack(){
            this.$router.back();
        },

        // 获取项目类型
        async getTypeList(){
            let { data:res } = await this.$http.get('venue/types');
            this.typeList = res;
        },

        // 显示项目类型列表
        showTypeList(){
           this.typeShow = true;
        }
       
        
    },

  

}

</script>

<style lang="less"  >



.create_venue{

    height: 100vh;
    background: #e8e8e8;
    display: flex;
    flex-direction: column;
}

.create_venue{

    .van-cell__value{
        overflow: visible !important;
    }

    
    .van-nav-bar{
        background: #3298ed;
        .van-nav-bar__title{
            color:#fff;
        }
        .van-nav-bar__text{
            color:#fff;
        }
        .van-icon{
            color:#fff;
        }
    }

    .my_join,.my_create{
        padding:30px;
    }

    .body{
        flex-grow: 1;
        background: #fff;
    }

    .game-des{
        margin-top: 20px;
    }

    .btn-wrap{
        padding:30px;
    }

}



</style>